<!DOCTYPE html>
<html>

  <head lang='zh'>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
    <title>Luckysheet</title>

    <link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='./plugins/plugins.css' />
    <link rel='stylesheet' href='./css/luckysheet.css' />
    <link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
    <script src="./plugins/js/plugin.js"></script>

    <!-- rollup luckysheet.js -->
    <script src="./luckysheet.umd.js"></script>

  </head>

  <body>
    <!-- Non-full screen test -->
    <!-- <div style="position: relative;width: 100%;height: 100%;">

		<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div>
	</div> -->
    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;">
    </div>
    <!-- demo feature, non-production use -->
    <script src="./demoData/demoFeature.js"></script>
    <script src="./demoData/sheetFormula.js"></script>
    <script src="./demoData/sheetCell.js"></script>
    <script src="./demoData/sheetConditionFormat.js"></script>
    <script src="./demoData/sheetTable.js"></script>
    <script src="./demoData/sheetComment.js"></script>
    <script src="./demoData/sheetPivotTableData.js"></script>
    <script src="./demoData/sheetPivotTable.js"></script>
    <script src="./demoData/sheetSparkline.js"></script>
    <script src="./demoData/sheetChart.js"></script>
    <script src="./demoData/sheetPicture.js"></script>
    <script src="./demoData/sheetDataVerification.js"></script>

    <script>
      // import sheetFormula from './demoData/sheetFormula.js'
      // import sheetCell from './demoData/sheetCell.js'
      // import sheetConditionFormat from './demoData/sheetConditionFormat.js'
      // import sheetTable from './demoData/sheetTable.js'
      // import sheetComment from './demoData/sheetComment.js'
      // import sheetPivotTableData from './demoData/sheetPivotTableData.js'
      // import sheetPivotTable from './demoData/sheetPivotTable.js'
      // import sheetSparkline from './demoData/sheetSparkline.js'
      // import sheetChart from './demoData/sheetChart.js'
      // import sheetPicture from './demoData/sheetPicture.js'
      // import sheetDataVerification from './demoData/sheetDataVerification.js'
      var savePro = {
        name: '', //工作表名称
        color: '', //工作表颜色
        index: '',
        status: '', //激活状态
        order: '', //工作表的下标
        hide: '', //是否隐藏
        row: '', //行数
        column: '', //列数
        defaultRowHeight: '', //自定义行高
        defaultColWidth: '', //自定义列宽
        celldata: '', //初始化使用的单元格数据
        config: '',
        scrollLeft: '', //左右滚动条位置
        scrollTop: '', //上下滚动条位置
        luckysheet_select_save: '', //选中的区域
        calcChain: '', //公式链
        isPivotTable: '', //是否数据透视表
        pivotTable: '', //数据透视表设置
        filter_select: '', //筛选范围
        filter: '', //筛选配置
        luckysheet_alternateformat_save: '', //交替颜色
        luckysheet_alternateformat_save_modelCustom: '', //自定义交替颜色
        luckysheet_conditionformat_save: '', //条件格式
        frozen: '', //冻结行列配置
        chart: '', //图表配置
        zoomRatio: '', // 缩放比例
        image: '', //图片
        showGridLines: '', //是否显示网格线
        dataVerification: '' //数据验证配置
      }

      $(function () {

        // According to the browser language
        var lang = luckysheetDemoUtil.language() === 'zh' ? 'zh' : 'en';
        var isShare = luckysheetDemoUtil.getRequest().share; // '?share=1' opens the collaborative editing mode
        var gridKey = luckysheetDemoUtil.getRequest()
        .gridKey; // workbook id for collaborative editing, or directly define here
        var options = null;

        if (isShare || gridKey) {
          // http://localhost:3000/?gridKey=12eyy789-kk45ofid-23737245
          if (!gridKey) {
            alert('If gridKey is not provided in the address bar, please add it in the source code')
          }
          options = {
            container: "luckysheet",
            lang: lang,
            allowUpdate: true,
            updateImageUrl: location.origin + "/luckysheet/api/updateImg",
            updateUrl: "ws://" + location.host + "/luckysheet/websocket/luckysheet",
            gridKey: gridKey,
            loadUrl: location.origin + "/luckysheet/api/load",
            loadSheetUrl: location.origin + "/luckysheet/api/loadsheet"
          }
        } else {
          // http://localhost:3000/ 
          options = {
            container: 'luckysheet',
            lang: lang,
            // pager: {
            // 	pageIndex: 1,
            // 	pageSize: 10,
            // 	total: 50,
            // 	selectOption: [10, 20]
            // },
            forceCalculation: false,
            plugins: ['chart'],
            fontList: [{
                "fontName": "HanaleiFill",
                "url": "./assets/iconfont/HanaleiFill-Regular.ttf"
              },
              {
                "fontName": "Anton",
                "url": "./assets/iconfont/Anton-Regular.ttf"
              },
              {
                "fontName": "Pacifico",
                "url": "./assets/iconfont/Pacifico-Regular.ttf"
              }
            ],
            hook: {
              cellDragStop: function (cell, postion, sheetFile, ctx, event) {
                // console.info(cell, postion, sheetFile, ctx, event);
              },
              rowTitleCellRenderBefore: function (rowNum, postion, ctx) {
                // console.log(rowNum);
              },
              rowTitleCellRenderAfter: function (rowNum, postion, ctx) {
                // console.log(ctx);
              },
              columnTitleCellRenderBefore: function (columnAbc, postion, ctx) {
                // console.log(columnAbc);
              },
              columnTitleCellRenderAfter: function (columnAbc, postion, ctx) {
                // console.log(postion);
              },
              cellRenderBefore: function (cell, postion, sheetFile, ctx) {
                //console.log(cell,postion,sheetFile,ctx);
                if(cell && cell.f && cell.f.indexOf('=random')===0){
                  // console.log(cell,postion,sheetFile,ctx);
                }
                if(cell && cell.f && cell.f.indexOf('=random')===0){
                  const nowTime = new Date().getTime()
                  if(cell._renderTime && nowTime-cell._renderTime<200){
                    console.log('=====>',cell,nowTime-cell._renderTime);
                    return
                  }
                  const val = Math.random()+''
                  const newCell = {
                    m: val,
                    v: val,
                    f: cell.f,
                    _renderTime:nowTime
                  }
                  console.log(cell,postion,sheetFile,ctx);
                  luckysheet.setCellValue(postion.r,postion.c,newCell)
                  return false
                }
              },
              cellRenderAfter: function (cell, postion, sheetFile, ctx) {
                // console.log(postion);
              },
              cellMousedownBefore: function (cell, postion, sheetFile, ctx) {
                // console.log(postion);
              },
              cellMousedown: function (cell, postion, sheetFile, ctx) {
                // console.log(sheetFile);
              },
              sheetMousemove: function (cell, postion, sheetFile, moveState, ctx) {
                // console.log(cell,postion,sheetFile,moveState,ctx);
              },
              sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
                // console.log(cell,postion,sheetFile,moveState,ctx);
              },
              cellAllRenderBefore: function (data, sheetFile, ctx) {
                // console.info(data,sheetFile,ctx)
              },
              updated: function (operate) {
                // console.info(operate)
              }, 
              cellUpdateBefore: function (r, c, value, isRefresh) {
                // console.info('cellUpdateBefore',r,c,value,isRefresh)
                //if(typeof value === 'string' && value.indexOf('=random')===0){
                //  const val = Math.random()
                //  luckysheet.setCellValue(r,c,{m:val+'',v:val,f:value})
                //  return false
                //}
              },
              cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
                // console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
              },
              sheetActivate: function (index, isPivotInitial, isNewSheet) {
                // console.info(index, isPivotInitial, isNewSheet)
              },
              rangeSelect: function (index, sheet) {
                // console.info(index, sheet)
              },
              commentInsertBefore: function (r, c) {
                // console.info(r, c)
              },
              commentInsertAfter: function (r, c, cell) {
                // console.info(r, c, cell)
              },
              commentDeleteBefore: function (r, c, cell) {
                // console.info(r, c, cell)
              },
              commentDeleteAfter: function (r, c, cell) {
                // console.info(r, c, cell)
              },
              commentUpdateBefore: function (r, c, value) {
                // console.info(r, c, value)
              },
              commentUpdateAfter: function (r, c, oldCell, newCell) {
                // console.info(r, c, oldCell, newCell)
              },
              cellEditBefore: function (range) {
                // console.info(range)
              },
              workbookCreateAfter: function (json) {
                // console.info(json)
              },
              rangePasteBefore: function (range, data) {
                // console.info('rangePasteBefore',range,data)
                // return false; //Can intercept paste
              },


            },
            data: [{
              name: 'sheet1'
            }],
            // data: [sheetCell,sheetFormula,sheetConditionFormat,sheetSparkline,sheetTable,sheetComment,sheetPivotTableData,sheetPivotTable,sheetChart,sheetPicture,sheetDataVerification]
          }
        }
        options.loading = {
          image: () => {
            return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`
          },
          imageClass: "loadingAnimation"
        }
        options.cellRightClickConfig = {
          customs: [{
            title: 'get',
            onClick: function (clickEvent, event, params) {
              console.log('function test click', clickEvent, event, params)
              const allSheets = luckysheet.getAllSheets()

              const newSheets = []
              const keys = Object.keys(savePro)
              allSheets.forEach(sheet => {
                const obj = {}
                for (const key in sheet) {
                  if (keys.indexOf(key)>=0) {
                    obj[key] = sheet[key]
                  }
                }
                newSheets.push(obj)
              })
              console.log('lucksheetObj=======>', newSheets)
            }
          }, {
            title: 'set',
            onClick: function (clickEvent, event, params) {
              const list = luckysheet.getRangeWithFlatten() || []
              console.log('list=======>', list)
              list.forEach(obj => {
                console.log('obj=======>', obj)
                luckysheet.setCellValue(obj.r,obj.c,{item:{aa:Math.random()}})
              });
              //luckysheet.setCellValue(0,0,val)
            }
          }]
        }
        options.showinfobar = false
        const obj = luckysheet.create(options);
        console.log('lucksheetObj=======>', obj)
      })

    </script>
    <style>
      /* 自定义loading演示样式 */
      @keyframes loading-rotate {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes loading-dash {
        0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -40px;
        }

        100% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -120px;
        }
      }

      .loadingAnimation {
        width: 3em;
        height: 3em;
        animation: loading-rotate 2s linear infinite;
      }

      .loadingAnimation circle {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: currentColor;
        stroke-linecap: round;
      }

    </style>
  </body>

</html>
